<html>

<head>
	<title>Raspberry Pi Car with Video Live Streaming</title>
	<link rel="stylesheet" href='/static/css/style.css' />
	<script src="/static/js/jquery.min.js" type="text/javascript"></script>
	<script>
	  function car_action(action) {
			$.ajax({
				type: 'GET',
				url: '/car_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
		function car_add_min_speed(speed) {
			$.ajax({
				type: 'GET',
				url: '/add_min_speed',
				dataType: 'json',
				data: { 'add_min_speed': add_min_speed },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
		function car_turn_speed(speed) {
			$.ajax({
				type: 'GET',
				url: '/turn_speed',
				dataType: 'json',
				data: { 'turn_speed': speed },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
	</script>
</head>

<body>
	<h1>Raspberry Pi 4WD Music Box</h1>
	<hr />
	<!-- 
    GO = 0
    BACK = 1
    STOP = 2
    LEFT = 3
    RIGHT = 4
	
	LEFT_STEP = 5
    RIGHT_STEP = 6

	ADD_SPEED=10 
    MIN_SPEED=20
    -->
	<div class="btn_container">
		<button class="btn_circle"  onclick="car_action(0)">前进</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle" onclick="car_action(5)">单步左转</button>
	    <button class="btn_circle" onclick="car_action(3)">连续左转</button>
		<button class="btn_circle" onclick="car_action(2)">停止</button>
		<button class="btn_circle" onclick="car_action(4)">连续右转</button>
		<button class="btn_circle" onclick="car_action(6)">单步右转</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle"  onclick="car_action(1)">后退</button>
	</div>
	<div class="btn_container">
		<button onclick="car_add_min_speed(10)">加速</button>
		<button onclick="car_add_min_speed(20)">减速</button>
	</div>
	<div class="btn_container">
		<button onclick="car_turn_speed(100)">快转向(差速100%)</button>
		<button onclick="car_turn_speed(75)">稍快转(差速75%)</button>
		<button onclick="car_turn_speed(50)">中转向(差速50%)</button>
		<button onclick="car_turn_speed(25)">慢转向(差速25%)</button>
	</div>
	<hr />
</body>
</html>